<template>
  <transition>
  <div class="app-3c-details">

    <div class="app-main">
      <div class="module-header">
        申请方-<span>{{resData.applyname}}</span>
      </div>
      <div class="module-body">
        <ul class="details-list">
          <li class="item">
            <span class="item-content item-left">中国标准号</span>
            <span class="item-content item-right">{{resData.factorycode}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">美国标准号</span>
            <span class="item-content item-right">{{resData.america}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">欧共体标准号</span>
            <span class="item-content item-right">{{resData.europe}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">生产企业名称</span>
            <span class="item-content item-right">{{resData.factoryname}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">曾用企业名</span>
            <span class="item-content item-right">{{resData.usedname}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">生产企业地址</span>
            <span class="item-content item-right">{{resData.factoryaddress}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">所在国别地区</span>
            <span class="item-content item-right">{{resData.countryarea}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">认证类别</span>
            <span class="item-content item-right">{{resData.cardtype}}</span>
          </li>
          <li class="item">
            <span class="item-content item-left">相关图标</span>
                <span class="item-content item-right">
                    <img class="ic-logo" :src="resData.icon"/>
                </span>
          </li>
        </ul>
      </div>
      <div class="module-footer">
        <mt-button type="primary" class="button-check" @click="handleCheck">查看相关证书</mt-button>
      </div>
    </div>

    <mt-popup
      v-model="popupCheckBook"
      position="right" class="my-popup-check">
      <ul class="book-list">
        <li class="item" v-for="(item,index) in bookList" :class="{active:curIndex==index}">
          <dl class="item-header" @click="handleMoreInfo(index)">
            <dd class="item-title">证书信息（{{index+1}}/{{bookList.length}}）</dd>
            <dd><span class="item-addon">证书编号：</span><span class="item-content">{{item.cardno}}</span></dd>
            <dd><span class="item-addon">产品类型：</span><span class="item-content">{{item.producttype}}</span></dd>
            <dd><span class="item-addon">证书状态：</span><span class="item-content">{{item.state}}</span></dd>
          </dl>
          <!--<dl class="item-body">-->
            <!--<dd><span class="item-addon">产品名称：</span><span class="item-content">{{item.pro}}</span></dd>-->
            <!--<dd><span class="item-addon">规格型号：</span><span class="item-content">{{item.proBook}}</span></dd>-->
            <!--<dd><span class="item-addon">认证模式：</span><span class="item-content">{{item.proOther}}</span></dd>-->
          <!--</dl>-->
        </li>
      </ul>
    </mt-popup>
  </div>
    </transition>
</template>

<script>
  import { Button,Toast,Picker  } from 'mint-ui';
export default {
  data () {
    return{
      popupCheckBook:false,
      searchValue:'',
      dataTotal:6,
      resData:'',
      dataList:[
        {
          title:'黑龙江佳星玻璃股份有限公司',
          id:'1'
        },{
          title:'黑龙江佳星玻璃股份有限公司',
          id:'2'
        },{
          title:'黑龙江佳星玻璃股份有限公司',
          id:'3'
        },{
          title:'黑龙江佳星玻璃股份有限公司',
          id:'4'
        },{
          title:'黑龙江佳星玻璃股份有限公司',
          id:'5'
        }
      ],
      bookList:[],
      curIndex:-1,
    }
  },
  watch: {},
  beforeDestroy: function() {
    document.body.pxoveAttribute("class","add_bg");
  },
  mounted(){
    document.getElementsByTagName("body")[0].className="add_bg";

    var params = new URLSearchParams();
    params.append('id', this.$route.query.id);
    this.$axios({
      method: 'post',
      url:'gp/app/glassFactoryApp!getStandardGlassFactoryById.do',
      data:params,
    }).then((res)=>{
      if(res.data.result==true && res.data.statusCode==200){
      this.resData=res.data.object
      }
    });
  },
  methods:{
    handleCheck(){
      this.popupCheckBook=true;
      var params = new URLSearchParams();
      params.append('factory', this.$route.query.id);
      this.$axios({
        method: 'post',
        url:'gp/app/appStandardGlass!getStandardGlassList.do',
        data:params,
      }).then((res)=>{
        if(res.data.result==true && res.data.statusCode==200){
          this.bookList=res.data.object
        }
    });

    },
    handleMoreInfo(index){
      this.curIndex=index
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-3c-details .app-main {
    padding: 0 0 24px;
  }
  .app-3c-details .module-header {

    background: -webkit-linear-gradient(left, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #03adf3 , #0080e5); /* 标准的语法 */
    padding:12px 0;
    font-size:16px;
    color: #fff;
    text-align: center; }
  .app-3c-details .module-body {
    padding: 16px 16px 0; }
  .app-3c-details .details-list {
    margin: 0;
    border: 1px solid #e5e5e5;
    border-bottom: none; }
  .app-3c-details .details-list .item {
    display: flex;
    align-items: flex-start;
    font-size: 0;
    border-bottom: 1px solid #e5e5e5; }
  .app-3c-details .details-list .item .item-content {
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    color: #444; }
  .app-3c-details .details-list .item .item-left {
    width: 34%;
    padding:10px 10px; }
  .app-3c-details .details-list .item .item-right {
    width: 66%;
    padding: 10px 10px;
    border-left: 1px solid #e5e5e5;
    text-align: right;
    min-height:24px;
  }
  .app-3c-details .details-list .ic-logo {
    display: inline-block;
    width: 50px;
    height: 50px;
    max-width: 100%;
    margin: 0 6px 6px; }
  .app-3c-details .module-footer {
    padding: 16px 6px 0;
    text-align: center; }
  .app-3c-details .module-footer .button-check {
    font-size: 15px;
  }

  .my-popup-check {
    width: 90%;
    height: 100%;
    overflow: auto;
    background: #f5f5f5; }
  .my-popup-check .book-list {
    margin: 0;
    padding:16px 14px 16px; }
  .my-popup-check .item {
    background: #fff;
    margin: 0 0 10px;
    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    padding: 0 0 12px; }
  .my-popup-check .item-header {
    background: #fff;
    position: relative;
    margin: 0;
    color: #fff;
    font-size:15px;
  }
  .my-popup-check .item-header dd {
    background: #fff;
    margin:0;
    padding:3px 12px;
    display: flex;
    flex-wrap: wrap;
    color: #111;
    font-size:14px;
  }
  .my-popup-check .item-header .item-title {

    background: -webkit-linear-gradient(left, #03adf3 , #0080e5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #03adf3 , #0080e5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #03adf3 , #0080e5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #03adf3 , #0080e5); /* 标准的语法 */
    padding:6px 12px;
    margin:0 0 4px;
    font-size:15px;
    font-weight: bold;
    color: #fff; }
  .my-popup-check .item-addon {
    width: 25%;
  }
  .my-popup-check .item-content {
    display: flex;
    width: 75%;
  }
  .my-popup-check .item-body {
    background: #fff;
    display: none;
    margin: 0;
    font-size: 14px;
  }
  .my-popup-check .item.active .item-body {
    display: block;
  }
  .my-popup-check .item-body dd {
    background: #fff;
    margin:0;
    padding:3px 12px;
    display: flex;
    flex-wrap: wrap;
    color: #111;
    font-size:14px;
  }
</style>
